.login-container {
  position: relative;

  .login-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -9;
    overflow: hidden;

    image {
      width: 100%;
      min-height: 100%;
    }
  }

  .login-main {
    width: 100vw;
    height: 100vh;
    // z-index: 99;
  }

  .container4 {
    margin-top: 10rpx;
    background-color: rgba(255, 255, 255, .5);
    // filter: blur(10rpx);
  }

  .container {
    position: absolute;
    // top: 180rpx;
    top: 10vh;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5333rem;
    width: 100%;

    .p {
      margin: 40rpx 0 0;
      font-size: 48rpx;
    }

    .h1 {
      margin: 20rpx 0 0;
      font-size: 100rpx;
      font-family: "Microsoft YaHei UI Light";
    }

    .span {
      color: #999;
      font-size: 32rpx;
    }
  }

  .input_container {
    background-color: #a5646d;

    input {
      margin: 40rpx 40rpx 100rpx;
      text-align: center;
      height: 80rpx;
      border: 1px solid #ccc;
      border-radius: 20rpx;
    }

    button {
      margin: 0 40rpx 20rpx;
      color: #a5646d;
      border: 1px solid #a5646d;
      background-color: #fff;
    }
  }

  .login-btn3 {
    position: absolute;
    top: 820rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260rpx;
    height: 260rpx;
    background-color: #86C6F6;
    opacity: 0;
  }

  .login-btn4 {
    position: absolute;
    top: 1000rpx;
    left: 63%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260rpx;
    height: 260rpx;
    background-color: #85a4cd;
    opacity: 0;
  }

  .login-btn {
    position: absolute;
    top: 850rpx;
    right: 130rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    height: 200rpx;
    border-radius: 200rpx;
    background-color: transparent;
    color: #f8f0df;
    font-size: 36rpx;
  }

  .userinfo-mask {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 99;
  }

  .userinfo {
    position: absolute;
    top: 53vh;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;

    .userinfo-avatar {
      overflow: hidden;
      width: 200rpx;
      height: 200rpx;
      // margin: 20rpx;
      border-radius: 50%;
    }

    .userinfo-nickname {
      margin-top: 10rpx;
      font-size: 36rpx;
      text-align: center;
      // color: #333;
      color: #f1f1f1;
      width: 300rpx;
      white-space: nowrap;
      /*内容超宽后禁止换行显示*/
      overflow: hidden;
      /*超出部分隐藏*/
      text-overflow: ellipsis;
      /*文字超出部分以省略号显示*/
    }

    .login-text {
      // color: #333;
      color: #f1f1f1;
    }

    van-loading {
      margin-top: 40rpx;
    }
  }

  .rights {
    position: absolute;
    bottom: 30rpx;
    left: 0;
    width: 100%;
    // color: #999;
    color: #333;
    font-size: 28rpx;
    text-align: center;
  }
}